import React, { useState, useEffect } from 'react';
import { Skeleton } from 'antd'; 
import { getTableListOp } from '../service';
import styles from './index.module.less';

const DataBoard = ({ updateKey, handleSetType }) => {
  const [data, setData] = useState([]);

  useEffect(()=>{
    getDataFunc();
  }, [updateKey])

  const getDataFunc = async () => {
    const { data, success } = await getTableListOp({current: 1, size: 6, status: 1});
    if(success){
      setData(data?.records || []);
    }
  }

  return (<>
    <div className={styles.articleWrapper}>
        {
          data.length ? data.map(item=>{
            return <div className="articleItem" key={item.id} onClick={()=>handleSetType(item.id)}>
              <span className="text-overflow articleTitle">{item.title}</span>
              <span className="articleTime">{item.createTime}</span>
            </div>
          }) : [1,2,3,4].map(item=>{
            return <div className="articleItem" key={item}>
              <Skeleton.Input active size="small" />
              <Skeleton.Button active size="small" shape="round"/>
            </div>
          })
        }
    </div>
  </>)

}

export default React.memo(DataBoard, (prev, next)=>{
  return prev.updateKey == next.updateKey;
})